<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <gradient-bar></gradient-bar>
        <div>
          <title-card title="实现代码"></title-card>
          <pre-code :code="code" language="JavaScript" />
          <title-card title="图例交互"></title-card>
          <pre-code :code="legendselectchanged" language="JavaScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script setup name="ChartBar2">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import GradientBar from "./GradientBar/index.vue";
import TitleCard from "@/components/TitleCard/index.vue"
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);

const code = ref(`charts = echarts.init(myChart.value);
  initOption();
  const myShape = {
    x: 0,
    y: 0,
    width: 20, //柱宽
  };
  // 绘制右侧面
  const InclinedRoofRight = echarts.graphic.extendShape({
    shape: myShape,
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y + 15];
      const c1 = [shape.x + 20, shape.y];
      const c2 = [xAxisPoint[0] + 20, xAxisPoint[1]];
      const c3 = [xAxisPoint[0], xAxisPoint[1] + 15];
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
    },
  });
  // 注册三个面图形
  echarts.graphic.registerShape('InclinedRoofRight', InclinedRoofRight);
  // 绘制左侧面
  const InclinedRoofLeft = echarts.graphic.extendShape({
    shape: myShape,
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y + 15];
      const c1 = [shape.x - 20, shape.y];
      const c2 = [xAxisPoint[0] - 20, xAxisPoint[1]];
      const c3 = [xAxisPoint[0], xAxisPoint[1] + 15];
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
    },
  });
  // 注册三个面图形
  echarts.graphic.registerShape('InclinedRoofLeft', InclinedRoofLeft);
  charts = echarts.init(myChart.value);
  setChart();
  drawLine();`)
const legendselectchanged = ref(`const drawLine = () => {
  // 基于准备好的dom，初始化echarts实例
  charts.on('legendselectchanged', (obj) => {
    if (!obj) {
      isFinish.value = true;
      isAll.value = true;
    } else {
      isFinish.value = obj.selected['完成数量'];
      isAll.value = obj.selected['目标数量'];
    }
    setChart();
  });
};
const setChart = () => {
  option.value.legend.selected = {
    完成数量: isFinish.value,
    目标数量: isAll.value,
  }
  if (isAll.value && isFinish.value) {
    setOption();
  } else if (isAll.value && !isFinish.value) {
    setOption1();
  } else if (!isAll.value && isFinish.value) {
    setOption2();
  } else {
    setOption3();
  }
};`)

const getTitle = () => {
  postArticleDetail({
    route: 'ChartBar2',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>